import React, { useContext } from 'react';
import { Flex } from 'antd';
import { IconContent } from './iconContent';
import { Icon } from '@amcax/base';
import { MessageContext } from '../CollapseTemplate';
import { useFocusStore } from '../../common/store';

export const SelectionContent = ({
  layout,
  schema,
  isPicker,
  children,
  onFocus,
  formData,
  uiSchema,
  disabled,
}) => {
  const { layout: layout1 } = useContext(MessageContext);
  const { setFocused, focusId } = useFocusStore();
  const layout2 = layout ?? layout1 ?? [1, 1];
  const label = uiSchema?.['ui:options']?.label ?? true;
  return (
    <Flex
      style={{ gap: 4 }}
      className='items-center'>
      <Flex
        style={{ flex: layout2[0], gap: 10 }}
        className='items-center'>
        <span
          style={{ flex: 1 }}
          className='fs'>
          {label ? schema.title : ''}
        </span>
        {isPicker && (
          <IconContent
            style={{
              paddingLeft: 1,
            }}
            isSelected={schema.title === focusId}
            disabled={disabled}
            onClick={() => {
              if (disabled) return;
              setFocused(schema.title);
              onFocus(schema.title, formData);
            }}>
            <Icon
              style={{
                fontSize: '14px',
              }}
              color='red'
              name={`commands/common/${schema.title === focusId ? (disabled ? 'arrow-active-disable' : 'arrow-active') : 'arrow'}`}
            />
          </IconContent>
        )}
      </Flex>
      <Flex
        style={{
          width: 0,
          flex: layout2[1],
          gap: 5,
          overflow: 'hidden',
          fontSize: 12,
        }}>
        {children}
      </Flex>
    </Flex>
  );
};
